/*
 * @Author: 肖思汗 
 * @Date: 2025-06-02 12:09:44 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-09-05 09:49:17
 */

import { Canvas, View } from '@tarojs/components';
import Taro, { useDidHide, useDidShow } from "@tarojs/taro";
import clsx from 'clsx';
import { autorun } from "mobx";
import { observer } from "mobx-react-lite";
import { ReactNode, useEffect, useRef, useState } from "react";
import utils from 'src/utils/utils';
import utilsStore from 'src/utils/utilsStore';
import layerListStore from '../LayerList/layerListStore';
import preView2D3DStore from '../RightTop/PreView2D3D/preView2D3DStore';
import stickerModelStore from '../StickerModel/stickerModelStore';
import templateModelStore from '../TemplateModel/templateModelStore';
import textModelStore from '../TextModel/textModelStore';
import styles from "./designer.module.less";
import designerRender from "./designerRender";
import leftTopStore from '../LeftTop/leftTopStore';
import maskModelStore from '../MaskModel/maskModelStore';
import cropModelStore from '../CropModel/cropModelStore';
import blurWarnStore from '../BlurWarn/blurWarnStore';

interface Iprops {
    children?: ReactNode
}

// 设计器
const Designer = observer((props: Iprops) => {

    const [showPerview, setShowPerview] = useState(preView2D3DStore.show);

    const [showText, setShowText] = useState(textModelStore.show);
    const [showLayerList, setShowLayerList] = useState(layerListStore.show);

    const hasRotation = useRef<boolean>(false);

    useDidShow(() => {
    });

    useDidHide(() => {
    });

    useEffect(() => {
        Taro.createSelectorQuery().select('#fabricCanvas')
            .fields({ node: true, size: true, rect: true })
            .exec(res => {
                if (res[0]) {
                    const { bottom, height, left, node, nodeCanvasType, right, top, width } = res[0];
                    designerRender.setRect({ left, top, right, bottom, width, height });
                    designerRender.init(node);
                }
            });
    }, []);

    useEffect(() => autorun(() => {
        setShowPerview(preView2D3DStore.show);
        setShowText(textModelStore.show);
        setShowLayerList(layerListStore.show);
    }, { delay: 30 }), []);


    return (
        <View
            className={clsx(
                styles.designer,
                (cropModelStore.show || showPerview) && styles.hide
            )}
            style={{
                top: (
                    showLayerList ||
                    showText ||
                    stickerModelStore.show ||
                    leftTopStore.showColorPicker ||
                    textModelStore.show ||
                    templateModelStore.show ||
                    maskModelStore.show
                ) ?
                    utilsStore.titleTop :
                    utilsStore.titleTop + utils.rpx2px(180),
            }}
        >
            <Canvas
                className={styles.fabricCanvas}
                id='fabricCanvas'
                type='2d'
                width="1024px"
                height="1024px"
                style={{
                    width: '100%',
                    height: '100%',
                }}
                disable-scroll={true}
                onTouchStart={(e) => {
                    // 如果是双指触摸，则计算初始距离和角度
                    if (e.touches.length === 1) {
                        designerRender.onTouchStart(e);
                        hasRotation.current = false;
                    }
                }}
                onTouchMove={(e) => {
                    // 如果是双指触摸，则计算双指缩放和旋转
                    if (e.touches.length === 1) {
                        if (hasRotation.current) {

                        } else {
                            designerRender.onMouseMove(e);
                        }
                    } else if (e.touches.length === 2) {
                        hasRotation.current = true;
                    }
                }}
                onTouchEnd={(e) => {
                    designerRender.onTouchEnd(e);
                    if (e.touches.length > 0) {
                        const activeObject = designerRender.getActiveObject();
                        if (["image", "Image"].includes(activeObject.type)) {
                            const isBlur = activeObject.isBlur();
                            if (isBlur) {
                                blurWarnStore.show();
                            }
                            console.log('isBlur', isBlur);
                        }
                    }

                    if (e.touches.length === 0) {
                        hasRotation.current = false;
                    }

                }}

            />
        </View>
    );
});

export default Designer;


